<template>
  <view>
    <view class="list-container">
      <view v-for="(item, index) in newData" :key="index">
        <view class="item">
          <view class="top-label"  @click="retract(index)">
            <view>整改完成时间</view>
            <view class="text-right">{{item.lawDate}}</view>
            <view v-if="item.show"><uv-icon name="arrow-down" size="40rpx" color="rgba(0, 0, 0, 0.4)"></uv-icon></view>
            <view v-else><uv-icon name="arrow-right" size="40rpx" color="rgba(0, 0, 0, 0.4)"></uv-icon></view>
          </view>
          <view v-if="item.show">
            <!-- 整改后照片 -->
            <view class="item-child">
              <view class="top-label">
                <view>整改后照片</view>
              </view>
              <view class="info">
                <view class="img-all">
                  <fileUpload :tableId="item.id" tableName="sup_law_item" type="rectify" :watermarkFlag="true"
                              :maxCount="0" :deletable="false" width="72" height="72"/>
                </view>
              </view>
            </view>
            <!-- 整改报告单 -->
            <view class="item-child">
              <view class="top-label">
                <view>整改报告单</view>
              </view>
              <view class="info">
                <view class="img-all">
                  <fileUpload :tableId="item.id" tableName="sup_law_item" type="rectifyReport" :watermarkFlag="true"
                              :maxCount="0" :deletable="false" width="72" height="72"/>
                </view>
              </view>
            </view>
            <!-- 整改内容 -->
            <view class="item-child">
              <view class="top-label">
                <view>整改内容</view>
              </view>
              <view class="content-item" style="margin-left: 10rpx;margin-bottom:10rpx;">{{item.rectificationContent||'--'}}</view>
            </view>
            <!-- 审核信息 -->
            <view class="item-child">
              <view class="top-label">
                <view class="requireStarBottom">审核结果</view>
                <view class="rectification">
                  <view v-for="(item, index) in rectificationList" :key="index" @click="selectRectification(item.value)">
                    <view :class="lawItemForm.lawFlag == item.value ? 'rectification-item-action' : 'rectification-item'">
                      {{ item.name }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="item-child" v-if="lawItemForm.lawFlag == 0">
              <view class="info">
                <view class="">
                  <view style="display: flex; flex-direction: column; margin-bottom: 15rpx">
                    <view class="zheng-gai-zi">审核意见</view>
                    <view class="zi-bottom textAreaBox">
                      <uv-textarea v-model="lawItemForm.reason" count maxlength="200"
                                   placeholder="请输入整改审核意见"></uv-textarea>
                      <view class="fontCount" @click="showSpeech">
                        <view>
                          <image :src="imgMinioPath + '/law/yuyin.png'"></image>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="sure-button-box">
        <button :disabled="loading" class="sure-button" @tap="submit">确认</button>
      </view>
    </view>
    <uv-popup ref="refSpeech" mode="bottom" round="8"  @change="change">
      <speech-recognition @getSpeeckInfo="getSpeeckInfo" v-if="refSpeechShow"></speech-recognition>
    </uv-popup>
  </view>
</template>

<script setup>
// import SpeechRecognition from "@/pages/law/components/voice/speechRecognition.vue";
import {ref, reactive, toRefs, defineProps, getCurrentInstance} from 'vue';
import lawItemAPI from "@/api/law/lawItem/lawItem";
import config from "@/common/config";
let imgMinioPath = ref(config.IMG_MINIO_PATH);

let {proxy} = getCurrentInstance();
const entryType = ref(uni.getStorageSync('entryType'));
const props = defineProps({
  data: {
    type: Array,
    default: [],
    required: true
  },
  id: {
    type: String,
    default: "",
    required: true
  },
});
let loading = ref(false);
let userInfo = ref(uni.getStorageSync('userInfo'));
let lawItemForm = reactive({
  lawId: props.id,
  lawType: '30',
  userId: userInfo.value.userId,
  userName: userInfo.value.user.nickName,
  lawFlag: 1,
  reason: ''
})
let retract=(index)=> {
  newData.value[index].show = !newData.value[index].show;
}
let newData = ref()
newData.value = props.data.map(obj => {
  return {
    ...obj, // 展开原始对象
    show: true // 添加新属性
  };
});
// 审核结果选中
const rectificationList = ref([
  {name: '通过', value: 1},
  {name: '不通过', value: 0}
]);

function selectRectification(value) {
  if (lawItemForm.lawFlag == value) {
    return;
  }
  lawItemForm.lawFlag = value;
  lawItemForm.reason = "";
}

const value = ref('');
//语音输入
const refSpeech = ref();
const showSpeech = () => {
  refSpeech.value.open();
};
let getSpeeckInfo = (val) => {
  refSpeech.value.close();
  lawItemForm.reason += val;
}
const refSpeechShow = ref(false);
const change= (e) => {
  refSpeechShow.value=e.show
}

// 整改审核确认
let submit = async (e) => {
  if(!lawItemForm.reason && lawItemForm.lawFlag != 1){
    uni.showToast({title: '请输入整改审核意见', icon: 'none'});
    return
  }
  loading.value = false;
  let res = await proxy.http.asyncPost(lawItemAPI.lawItemAdd, lawItemForm);
  if (res.code === 0) {
    await uni.showToast({icon: 'success', title: '审核成功', duration: 2000});
    setTimeout(() => {
       goBack()
      }, 1000)
  } else {
    await uni.showToast({title: res.msg, icon: 'none'});
  }
}

/** 返回上一页 */
let goBack = async () => {
  uni.$emit("refresh", {});
  await uni.navigateBack();
};
let setLocal = () =>{
  uni.setStorageSync("lawItemForm",lawItemForm)
}
defineExpose({
  setLocal,
})
let showStorageInfo = () => {
  let storageInfo = uni.getStorageSync("lawItemForm");
  if(storageInfo){
    uni.removeStorageSync("lawItemForm");
    lawItemForm.lawFlag = storageInfo.lawFlag;
    lawItemForm.reason = storageInfo.reason;
  }
}
showStorageInfo()
</script>

<style lang="scss" scoped>
@import "@/static/css/dailycheck/viewIndex.scss";

.textAreaBox {
  position: relative;
}

.fontCount {
  z-index: 99;
  position: absolute;
  bottom: 2px;
  right: 130rpx;
  color: #9e9e9e;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  image {
    height: 50rpx;
    width: 50rpx;
  }
}

.list-no {
  height: 80vh;
  margin-left: 5%;
  margin-right: 5%;
  border-radius: 20rpx;
  background-color: #fff;
}

::v-deep .requireStarBottom {
  width: 23%;
  position: relative;
}

::v-deep .requireStarBottom:after {
  position: absolute;
  right: 0;
  vertical-align: bottom; //加上星号会上下居中，不加会在上角展示
  content: ' *';
  color: rgba(255, 59, 48, 1);
  font-size: 100%;
}

::v-deep.uv-textarea__field {
  text-align: left !important;
}

.rectification {
  display: flex;
  grid-gap: 20rpx;

  .rectification-item-action {
    width: 110rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: rgba(51, 117, 246, 0.698);
    border-radius: 2px;
    font-size: 24rpx;
  }

  .rectification-item {
    background: #cccccc;
    @extend .rectification-item-action;
  }
}
.sure-button-box{
  width: 100vw;
}
.zheng-gai-zi{
  margin-left: 0rpx;
}
.text-right {
  font-size: 32rpx;
}
.list-container .item {
  padding:10rpx 20rpx;
}
</style>
